<template>
  <!--hook-page-scroll-->
  <view class="content">
    <z-paging ref="paging" v-model="dataList"
              auto-show-back-to-top
              back-to-top-bottom="200"
              back-to-top-threshold="50"
              :back-to-top-style="{right: '10rpx',width: '70rpx',height: '70rpx'}"
              use-page-scroll
              @query="queryList"
              :refresher-complete-delay="600">
      <template #top>
        <u-navbar
            title="品质专区"
            placeholder
            titleStyle="color:black"
            leftIconColor="#000"
            auto-back
        >
        </u-navbar>
      </template>

      <template #refresher>
        <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
          <cache-image style="width: 110rpx;height: 110rpx;margin: auto"
                       img-src="https://lsz.lszbg.com/imgs/logo_loading.gif" height="110rpx" width="110rpx">

          </cache-image>
        </view>
      </template>
      <view class="home_shop_box" style="box-sizing: border-box;padding: 0 20rpx;">
        <view v-for="(items,index) in dataList" v-if="dataList.length > 0" :key="index" class="shops_list">
          <shop-item :items="items" :newUser="newUser"></shop-item>
        </view>
      </view>
      <view style="display: flex;flex-direction: column;align-items: center;padding-top: 80rpx"
            v-if="dataList.length === 0 && !isNodata">
        <u-loading-icon color="#F97632"></u-loading-icon>
        <view
            style="font-size: 26rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 20rpx 0 60rpx 0;">
          正在为您加载附近店铺
        </view>
      </view>

      <template #empty>
        <XtxEmpty/>
      </template>
      <!-- 自定义的没有更多数据view -->
      <template #loadingMoreNoMore>
        <view class="null_text">没有更多数据</view>
        <u-safe-bottom></u-safe-bottom>
      </template>
    </z-paging>
  </view>
</template>
<script setup>

import {onLoad, onPageScroll, onReachBottom, onShow} from "@dcloudio/uni-app";
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging.js";
import {conUtils} from "../../utils/conUtils";
import {ref} from "vue";
import ShopItem from "../../pages/index/shopItem.vue";
import XtxEmpty from "../../components/XtxEmpty.vue";
import {getHotShopAPI} from "../../services/common";
import CacheImage from "../../components/CacheImage.vue";
import {useUserInfoStore} from "../../stores/modules/userInfo";
const useUser = useUserInfoStore()
const dataList = ref([])
const categoryId = ref(0)
const categoryName = ref('')
const keyword = ref('')

const isNodata = ref(false)
const sortType = ref(0)
const type1 = ref(1)
const type2 = ref(0)
const type4 = ref(0)
// 定义一个变量，用于判断是否是新用户
const newUser = ref()

const address = ref({
  latitude: '',
  longitude: '',
  addressStr: '',
})

onLoad(async (options) => {
  conUtils("options", JSON.stringify(options))
  // console.log("options", options)
  if (options.latitude && options.addressStr) {
    address.value.latitude = options.latitude
    address.value.longitude = options.longitude
    address.value.addressStr = options.addressStr
    categoryId.value = options.categoryId
    categoryName.value = options.categoryName
    newUser.value = options.newUser
  }
})
onShow(() => {
  // 页面加载判断用户是否登录和是否新用户
  if (useUser.isNewUser || !useUser.isLoginBool()) {
    newUser.value = '新用户'
  } else {
    newUser.value = '老用户'
  }
})
const paging = ref(null)
useZPaging(paging)
const pagePvId = ref('')
const is_new_shop = ref(0)  // 是否是新店铺
const queryList = (pageNo, pageSize) => {
  conUtils("queryList", pageNo)
  conUtils("pageSize", pageSize)
  if (!address.value.latitude) {
    paging?.value.complete(false);
    return
  }
  isNodata.value = false
  getHotShopAPI({
    lat: address.value?.latitude,
    lng: address.value?.longitude,
    limit: pageSize,
    page: pageNo
  }).then(res => {
    console.log("res", res.result)
    isNodata.value = true
    paging?.value.complete(res.result);
  }).catch(() => {
    paging?.value.complete(false);
  })
}

onPageScroll(e => {
})

onReachBottom(() => {
})

</script>
<style>
page {
  background-color: #F6F6F6;
}
</style>
<style lang="scss" scoped>
page {
  //height: 100%;
  background-color: #F6F6F6;
}

::v-deep .zp-l-container {
  margin-bottom: 50px !important;
}

::v-deep .u-slot-content {
  display: block !important;
}

.content {
  //height: 100%;
  display: flex;
  flex-direction: column;
}

.barContent {
  position: fixed;
  z-index: 99;
  width: 100%;
}

.refresh {
  height: 100%;
}

.zpaging {
  height: 100%;
}

.null_text {
  font-size: 26rpx;
  color: #b4b4b4;
  text-align: center;
  box-sizing: border-box;
  padding: 40rpx 0;
}

.Top_wrap {
  position: relative;
  height: 250px;
  width: 100%;

  .My_top {
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;

    .banner_img {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }

  .My_top1 {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    .banner_img {
      width: 100%;
      height: 100%;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

.nav_meu_wrap {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 0 20rpx 20rpx 20rpx;
  width: 93%;
  margin: 20rpx auto;

  .nav_title {
    display: flex;
    align-items: center;
    padding-left: 26rpx;
    justify-content: space-between;
    margin: 0 auto;

    .nav_title_item {
      flex: 1;
      text-align: center;
      position: relative;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: center;

      .m_title_name {
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 28rpx;
      }

      image {
        width: 50rpx;
        height: 20rpx;
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
    }
  }

  .sssswiper {
    height: 288rpx;

    image {
      width: 66rpx;
      height: 66rpx;
    }

    .grid-text {
      font-size: 24rpx;
      margin-top: 10rpx;
    }
  }
}

/* 首页筛选 */
.cateCheck {
  width: 100% !important;
  font-size: 26rpx;
  color: #999999;
  display: flex;
  justify-content: space-around;
  padding: 0 20rpx 10rpx;
  /*border-radius: 20rpx;transition: all .3s linear;
  &.position {
    position: fixed;top: 116rpx;left: 0;background-color: #fff;width: 100%;box-sizing: border-box;padding: 30rpx;border-radius: 0;margin: 0;z-index: 111;box-shadow: 0 0 20rpx 3rpx rgba(0,0,0,.2);
  }*/
}

.cateCheck > view image {
  width: 12rpx;
  height: 8rpx;
  position: relative;
  left: 8rpx;
  top: -4rpx;
}

.cateCheck .buttonBg {
  width: 64rpx;
  height: 40rpx;
  border-radius: 40rpx;
  background: linear-gradient(140deg, #FECC32 0%, #FECC32 100%);
  position: relative;
  display: inline-block;
  top: 10rpx;
  margin-right: 10rpx;
}

.cateCheck .buttonOn {
  position: absolute;
  width: 36rpx;
  height: 36rpx;
  background-color: white;
  border-radius: 40rpx;
  top: 2rpx;
  right: 2rpx;
}

.cateCheck .btnmoren {
  color: #222;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.cateCheck .checkShopType {
  color: #333;
  background: linear-gradient(140deg, #FECC32 0%, #FFDF50 100%);
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.cateCheck .buttonUn {
  background: #999;
}

.cateCheck .buttonUn .buttonOn {
  left: 2rpx;
}

.TongZhi_wrap {
  background-color: #ffffff;
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  width: 93%;
  margin: 0 auto 20rpx;

  .TongZhi_item {
    display: flex;
    align-items: center;

    image {
      width: 128rpx;
    }

    .tz_wenan {
      padding: 0 20rpx 0 20rpx;
      word-break: break-all;
      display: -webkit-box;
      font-size: 22rpx;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .ta_right_icon {
      margin-left: auto;
      border-radius: 200rpx;
      background-color: #EFEFEF;
      width: 50rpx;
      height: 50rpx;
      text-align: center;
      line-height: 50rpx;
      display: flex;
      align-items: center;
      padding-left: 10rpx;
    }
  }
}

.checkBox {
  width: 100%;
  background-color: #ffffff;
  border-radius: 0 0 40rpx 40rpx;
}

.checkBox .btnmoren {
  color: #222;
  background-color: #ffffff;
  border-radius: 10rpx;
  padding: 14rpx 20rpx;
  text-align: center;
  font-size: 24rpx;
}

.searchBox {
  //width: 500rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #999999;
  border-radius: 200rpx;
  background-color: #f1f1f2;
  margin-left: 30rpx;
  margin-right: 30rpx;
  margin-top: var(--status-bar-height);
}

.searchBox image {
  width: 26rpx;
  height: 25rpx;
  margin-left: 30rpx;
  margin-right: 15rpx;
}

.nearShop {
  font-size: 40rpx;
  color: #222222;
  font-weight: bold;
  position: relative;
  margin-left: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 10rpx;
}

.nearShop::before {
  content: '';
  display: inline-block;
  width: 40rpx;
  height: 6rpx;
  position: absolute;
  left: 58rpx;
  top: 56rpx;
  background-color: #FECC32;
}

.sortList {
  width: 100%;
  height: auto;
}

.sortList view {
  height: 89rpx;
  border-bottom: 1rpx solid #f7f7f7;
  box-sizing: border-box;
  padding: 0 30rpx;
  line-height: 89rpx;
  font-size: 28rpx;
}

.sortList view:last-child {
  border: 0;
}

.sortList image {
  width: 28rpx;
  height: 25rpx;
  float: right;
  margin-top: 34rpx;
}

.cateCheck .buttonUn {
  background: #999;
}

.cateCheck .buttonUn .buttonOn {
  left: 2rpx;
}

.sortCheck text {
  color: #FECC32;
}

.notice_box {
  position: relative;
}

.notice_box .bg_img {
  width: 100%;
  height: 800rpx;
  vertical-align: bottom;
  border-radius: 20rpx;
}

.notice_box .close_img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 30rpx;
  top: 40rpx;
  z-index: 9;
}

.notice_box .notice_content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 130rpx;
  box-sizing: border-box;
  padding: 40rpx;
}

.notice {
  margin-top: -380rpx;
  width: 580rpx;
  height: 380rpx;
}

.nav_box {
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  height: 100rpx;
  background: #fff;
  flex: 1;

  .left_box {
    z-index: 88;

    image {
      width: 68rpx;
      margin-bottom: 10rpx;
    }
  }

  .sousuo_box {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;

    .input_box {
      border-radius: 200rpx;
      width: 100%;
    }

    .sousuo_btn {
      background-color: #FECC32;
      border-radius: 200rpx;
      color: #333333;
      position: absolute;
      right: 6rpx;
      width: 118rpx;
      height: 53rpx;
      line-height: 53rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }

  .right_box {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10rpx;

    image {
      width: 64rpx;
    }

    .tixing {
      width: 18rpx;
      height: 18rpx;
      border-radius: 200rpx;
      background-color: #F00;
      position: absolute;
      right: 10rpx;
      top: 10rpx;
    }
  }
}

/*抢红包弹窗样式*/
.HongBaoshow {
  width: 580rpx;

  .tc_bg_box {
    position: relative;

    .hb_bg {
      border-radius: 10px;
      width: 100%;
      height: 300rpx;
    }

    .wenan {
      position: absolute;
      z-index: 999;
      top: 0;
      padding: 46rpx;
      color: #fff;

      view:nth-child(1) {
        font-weight: bold;
        font-size: 44rpx;
      }

      view:nth-child(2) {
        margin-top: 10rpx;
      }
    }
  }

  .pingtai_box {
    padding: 10rpx 30rpx 0 30rpx;

    .pt_itme1 {
      display: flex;
      align-items: center;
      background-color: #FEF9E9;
      padding: 20rpx 30rpx;
      border-radius: 20rpx;
      width: 100%;
      margin: 30rpx 0 38rpx 0;

      .pt_icon {
        width: 100rpx;
        height: 100rpx;
      }

      .pt_info {
        padding-left: 25rpx;
        flex: 1;

        view:nth-child(1) {
          font-size: 34rpx;
          font-weight: bold;
        }

        view:nth-child(2) {
          color: #999999;
          font-size: 24rpx;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      .qiang_btn {
        width: 100rpx;
        height: 100rpx;
        margin-left: auto;
      }
    }
  }
}

.dangqian_dizhi {
  margin: 18rpx 0 10rpx 28rpx;
  padding: 0 0;
  display: flex;
  height: 36rpx;
  align-items: center;

  view:nth-child(1) {
    position: relative;
  }

  .adr_icon {
    width: 36rpx;
    height: 36rpx;
    margin-right: 10rpx;
    margin-bottom: 12rpx;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .cityName {
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 28rpx;
    z-index: 88;
  }
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FDE52F, #FDE52F);
}

/* 列表 */
.list {
  width: 100%;
  height: 360rpx;
  box-sizing: border-box;
  background: white;
  padding: 20rpx;
}

.list_whole {
  width: 20%;
  height: 150rpx;
  float: left;
  padding: 20rpx;
  text-align: center;
}

.list_whole:nth-child(5n + 5) {
  margin-right: 0;
}

.list_whole image {
  width: 96rpx;
  height: 96rpx;
}

.list_whole text {
  font-size: 24rpx;
  color: #393939;
  line-height: 40rpx;
  display: block;
}

.shops_list {
  background-color: #ffffff;
  border-radius: 20rpx;
  margin: 20rpx 0;
}
</style>
